<template>
  <div>
    <headNav></headNav>
    <div class="columnImg border-bottom">
        <div class="upImg">
            <div class="imgBox">
                <VanImage
                round
                width="1.2rem"
                height="1.2rem"
                :src="img"
                />
            </div>
        </div>
    </div>

    <div class="columnPhoto marT24">
        <Field
        is-link
        readonly
        clickable
        name="picker"
        input-align="right"
        label="自定义图标"
        placeholder="手机相册"
        />
        <input
            type="file"
            accept="xls,xlsx"
            multiple="multiple"
            class="uploadImg"
            @change="handelUpload($event)"
        >
    </div>

    <div class="columnIcon marT24">
        <Field name="picker" label="系统图标"/>
        <ul>
            <li v-for="(item,index) of iconList" :key="index">
                <div class="imgBox" @click="handelSetIcon(item.imgUrl)">
                    <VanImage
                    round
                    width="1rem"
                    height="1rem"
                    :src="item.imgUrl"
                    />
                </div>
            </li>
        </ul>
    </div>

    <div class="confirmBtn">
        <Button type="info" block @click="handelConfirm">保存</Button>
    </div>

  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav';
import COS from '@/util/COS';
import { getMaxListeners } from 'node-notifier';
import { Field,Button,Image as VanImage } from 'vant';
export default {
    name:'addPraiseIcon',
    components:{
      headNav,
      Field,
      Button,
      VanImage
    },
    computed:{
        currentPage(){
            return this.$store.state.studentAppraise.currentPage;
        }
    },
    data(){
      return {
          img:require('./images/comment1.png'),
          iconList:[]
      }
    },
    methods:{
        handelUpload(el){
            let file = el.target.files[0];
            COS.putObject(file).then(url => {
                el.target.value = ''
                this.img = url;
            })
        },
        handelSetIcon(val){
            this.img = val;
        },
        handelConfirm(){
            this.$store.commit('studentAppraise/setAddPraiseImgUrl',this.img);
            this.$router.go(-1);
        },
        getIconList(){
            this.$store.dispatch('studentAppraise/GetIconList').then(res=>{
                if(res.data.length > 0){
                    this.iconList = res.data;
                    this.img = this.iconList[0].imgUrl
                } 
            })
        }
    },
    mounted(){
        this.getIconList()
    }
}
</script>

<style lang="less" scoped>
.marT24{
    margin-top:0.24rem;
}
.columnImg{
    background-color:#fff;
    height: 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .upImg{
        width:1.2rem;
        text-align: center;
        .imgBox{
            width:1.2rem;
            height:1.2rem;
            img{
                width:100%;
                height:100%;
            }
        }
    }
}
.columnPhoto{
   position: relative;
   .uploadImg{
        position: absolute;
        top: 0;
        right: 20px;
        width: 70px;
        height: 42px;
        opacity: 0;
   }
}
.columnIcon{
    background-color:#fff;
    ul{
        width: 100%;
        display: flex;
        flex-wrap:wrap;
        height: 3.2rem;
        overflow: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        padding-bottom: 0.4rem;
        li{
            width:25%;
            margin-top:0.4rem;
            .imgBox{
                width:1rem;
                height:1rem;
                margin: 0 auto;
                img{
                    width:100%;
                    height:100%;
                }
            }
        }
    }
}
.confirmBtn{
    box-sizing: border-box;
    padding:0 0.3rem;
    margin-top:0.5rem;
}
</style>

